<template>
    <uni-popup ref="pop" type="center" :safe-area='false' :is-mask-click='false' :mask-click='false'
        @maskClick='tapMask'>
        <view class="box c-flex_column">
            <view class="row c-flex_row c-align_center c-justify_center">
                <image class="logo" src="/static/images/logo.png" mode="widthFix"></image>
            </view>
            <view class="row c-flex_row c-align_center c-justify_center">
                <button class="get-button c-button_clear c-button-color_confirm c-button-size_lg c-button-width_full"
                    open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :loading="loading">授权手机号登录/注册</button>
            </view>
        </view>
    </uni-popup>
</template>

<script>
    export default {
        data: function() {
            return {
                show: false,
                loading: false,
                extraData: null
            }
        },
        watch: {
            show: {
                handler: function(n) {
                    this.$nextTick(() => {
                        this.changeShow(n)
                    })
                },
                immediate: true
            }
        },
        methods: {
            openGetPhoneNumberPop(show, extraData) {
                this.show = show;
                this.extraData = extraData;
            },
            changeShow(show) {
                let pop = this.$refs.pop;
                if (pop) {
                    if (show) {
                        pop.open()
                    } else {
                        pop.close();
                    }
                }
            },
            tapMask() {
                return;
            },
            getPhoneNumber(e) {
                console.log("getPhoneNumber", e)
                const {
                    iv,
                    encryptedData
                } = e;
                this.$emit("getPhoneNumber", {
                    ...this.extraData,
                    iv,
                    encryptedData
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        position: relative;
        width: 90vw;
        margin: 0 auto;
        background: #fff;
        border-radius: 10rpx;
        box-shadow: 0 0 10rpx #88888844;

        .row {
            width: 100%;
            margin: 60rpx auto;
            margin-bottom: 30rpx;
        }

        .row:last-child {
            margin-bottom: 60rpx;
        }

        .logo {
            width: 150rpx;
        }

        .get-button {
            font-weight: 700;
        }
    }
</style>